import React, { useState, useEffect } from 'react'
import style from './index.module.css'
import { getProjectList } from './api'
import ProjectCard from './project_card'
const { box } = style
export default function () {
  const [project, setProject] = useState([])
  const getProject = async () => {
    await getProjectList().then(res => {
      setProject(res.data)
    })
  }
  useEffect(() => {
    getProject()
  }, [])

  return (
    <div className={box}>
      {project.map(item => (
        <ProjectCard
          title={item.title}
          introduce={item.introduce}
          imgUrl={item.imgUrl}
          id={item.id}
          key={item.id}
        />
      ))}
    </div>
  )
}
